<template>
    <div style="height: 100%">
        <navbar>
            <template #title>
                <div class="header-btn-search" v-if="isMeInd == true">
                    <router-link tag="div" to="/search">
                        <span>
                            {{ $t("button_search") }}
                        </span>
                    </router-link>
                </div>
                <div v-if="isMeInd == false" style="line-height: 56px;text-align: center;font-size: 18px;">{{ $t("personal_my_collection") }}</div>
            </template>
        </navbar>
        <div class="content-noBottom">
            <div class="paddingLR15 white-bg bottom-shadow-02" style="overflow: hidden;height: 44px;">
                <div class="box-tab-02">
                    <div class="color666" :class="{'cur': selected == 0}" @click="selectType(0)">{{ $t("menu_course") }}</div><!--课程-->
                    <div class="color666" :class="{'cur': selected == 1}" @click="selectType(1)">{{ $t('personal_my_data_file') }}</div><!--课程-->
                    <div class="color666" :class="{'cur': selected == 3}" @click="selectType(3)">{{ $t('cos_type_map') }}</div><!--课程-->
                </div>
            </div>
            <div style="height: calc(100% - 44px);" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getcollectList"
                    style="padding-bottom: 56px;"
                    >
                    <!--课程 start-->
                    <div :class="{'height100' : total === 0}" v-if="selected === 0">
                        <ul class="white-bg module-list-11" v-if="total > 0">
                            <li class="clearfix" v-for="course in collectList" :key="course.itmId">
                                <div @click="jumpCourseDetail(course.itmId, 0, 0, course.itmType)">
                                    <span class="img-box">
                                        <img :src="appUrl + course.itmIcon" alt="" width="100%"/>
                                    </span>
                                    <div>
                                        <p class="word-clamp-1 font-size14"><i class="public-mobile-icon" :class="{'cur' : course.itmMobileInd && course.itmMobileInd === 'no'}"></i>{{ course.itmTitle }}</p>
                                        <p class="color999 font-size11" style="margin-top: 5px;">{{ courseType[course.itmType] }}</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t("no_data") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--课程 end-->
                    <!--知识 start-->
                    <div :class="{'height100' : total === 0}" v-if="selected === 1">
                        <ul class="white-bg module-list-11" v-if="total > 0">
                            <li class="clearfix" v-for="knowledge in collectList" :key="knowledge.id" style="padding-left: 20px">
                                <div @click="jumpKnowledgeDetail(knowledge.id)">
                                    <div>
                                        <p class="word-clamp-1 font-size14"><span class="color999">{{ $t(knowledge.type) }}</span><em class="point"></em>{{ knowledge.title }}</p>
                                        <p class="color999 font-size11" style="margin-top: 5px;">{{ knowledge.createTime | formTime('splitTime') }}</p>
                                        <div class="color999 font-size11 clearfix" :style="{'text-align' : knowledge.loveCount ? 'left' : 'right'}">
                                            <span v-if="knowledge.loveCount" style="margin: 11px 10px 0 0;display: inline-block;"><em class="like-icon"></em>{{ knowledge.loveCount ? knowledge.loveCount : '0' }}</span>
                                            <span style="margin-top: 11px;display: inline-block;"><em class="browse-icon"></em>{{ knowledge.accessCount }}</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t("no_data") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--知识 end-->
                    <!--资讯 start-->
                    <div :class="{'height100' : total === 0}" v-if="selected === 2">
                        <ul class="white-bg module-list-11" v-if="collectList.length > 0">
                            <li class="clearfix" v-for="article in collectList" :key="article.queId" style="padding-left: 15px;">
                                <div @click="jumpQuestionDetail(article.queId, article.queType)">
                                    <div>
                                        <p class="word-clamp-1 font-size14">{{ article.queTitle }}</p>
                                        <p class="color999 font-size11" style="margin-top: 5px;" v-if="article.queCreateTime">{{ article.queCreateTime | formTime('splitTime') }}</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t("no_data") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--资讯 end-->
                    <!-- 地图 -->
                    <div :class="{'height100' : total === 0}" v-if="selected === 3">
                        <ul class="white-bg module-list-11" v-if="total > 0">
                            <li class="clearfix" v-for="map in collectList" :key="map.itmId">
                                <!--                                <div @click="jumpCourseDetail(course.itmId, 0, course.itm_permission_status)">-->
                                <div @click="jumpCourseDetail(map.itmId, 0, 0, map.itmType, map.itmTitle)">
                                    <span class="img-box">
                                        <img :src="appUrl + map.itmIcon" alt="" width="100%"/>
                                    </span>
                                    <div>
                                        <p class="word-clamp-1 font-size14"><i class="public-mobile-icon" :class="{'cur' : map.itmMobileInd && map.itmMobileInd === 'no'}"></i>{{ map.itmTitle }}</p>
                                        <p class="color999 font-size11" style="margin-top: 5px;">{{ map.desc }}</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t("no_data") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import { Toast } from 'vant';
import mixin from '@/components/mixin/Mixin.js';
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'Collection',
    components: {
        vanToast: Toast
    },
    mixins: [mixin],
    data() {
        return {
            pageNo: 1,
            selected: 0,
            collectList: [], //公开课
            total: 0, //总数
            isMeInd: false,
            encId: '', //获取用户id
            loginUserIdwb: '', //登录用户id
            loginUserId: '', //用户登录id
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        ...{ cwnEncrypt, cwnDecrypt },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getcollectList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        selectType(index) {
            this.selected = index;
            this.pageNo = 1;
            this.collectList = [];
            this.isLoading = true;
            this.getcollectList();
        },
        getcollectList(option) {
            let url = '';
            let method = 'POST';
            let params = {
                pageSize: 10,
                pageNo: this.pageNo
            };
            if (this.isMeInd === false) {
                params.usrEntId = this.encId;
            }
            if (this.selected === 0) {
                url = `/app/api/trainee/my/collect/course/list`;
                params.moduleEnum = 'COURSE';
            } else if (this.selected === 1) {
                method = 'GET';
                url = `/app/api/trainee/my/collect/file/list`;
            } else if (this.selected === 2) {
                url = `/app/api/trainee/my/collect/question/list`;
            } else if (this.selected === 3) {
                method = 'GET';
                url = `/app/api/trainee/my/collect/map/list`;
            } else {
                return;
            }
            this.$axios({
                method: method,
                url: url,
                params: params
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.collectList = res.data.results;
                    } else {
                        this.collectList = [...this.collectList, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord; // 奥比接口返回的总记录数有问题，暂时用下边的代码代替
                // this.total = this.collectList.length;
                this.isLoading = false;
                this.pageNo++;
                if (this.collectList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        /*跳课程考试详情页*/
        jumpCourseDetail(id, tkhId, permissionId, type, title) {
            if (permissionId === 0) {
                if (this.tkhId) {
                    this.tkhId = this.tkhId;
                } else {
                    this.tkhId = 0;
                };
                if (type) {
                    switch (type) {
                    case 'SELFSTUDY': // 网上课程
                        this.$router.push({path: `/course/${id}/${tkhId}`});
                        break;
                    case 'AUDIOVIDEO': // 公开课
                        this.$router.push({path: `/publicClass/openDetail/${id}`});
                        break;
                    case 'MAP': // 游戏课程
                        this.$router.push({path: `/studyMapDetail`, query: {itmId: id, title: title}});
                        break;
                    }
                }
            } else if (permissionId === 1) {
                Toast({message: this.$t('no_permission'), forbidClick: true}); //暂无权限
            } else {
                Toast({message: this.$t('lab_learn_tips_1'), forbidClick: true}); //请到PC端学习
            }
        },
        /*跳知识详情页*/
        jumpKnowledgeDetail(id) {
            // let kbiId = this.wbEncryptor(id);
            this.$router.push({path: `/knowledgeDetail/${id}`});
        },
        /*问答详情页*/
        jumpQuestionDetail(id, type) {
            this.$router.push({path: `/knowDetail/${type}/${id}`});
        }
    },
    mounted() {
        this.encId = this.cwnDecrypt(this.$route.params.encId); //用户id
        this.loginUserIdwb = this.wbEncryptor(window.localStorage.getItem('loginUser')); //用户登录id
        this.loginUserId = window.localStorage.getItem('loginUser'); //用户登录id
        if (this.encId === this.loginUserIdwb || this.encId === this.loginUserId) {
            this.isMeInd = true;
        }
        this.getcollectList();
    }
};
</script>

<style scoped lang="less">
    .box-tab-02 {
        height: 50px;
        overflow-x: scroll;
        display: -webkit-box;
        div {
            margin-right: 40px;
            font-size: 16px;
            height: 42px;
            line-height: 44px;
            border-bottom: 1px solid #ffffff;
            &.cur {
                color: #075ebb;
                border-bottom: 2px solid #075ebb;
            }
        }
    }
    .img-box {
        margin-left: 0;
        margin-right: 10px;
    }
</style>
